<template>
  <el-dialog
    :visible.sync="remarkVisible"
    :close-on-press-escape="true"
    :close-on-click-modal="false"
    append-to-body
    width="800px"
  >
    <template slot="title">
      <div class="tishi">
        <span> 报名信息</span>
      </div>
    </template>
    <ul class="preview">
      <li class="preview-li">
        <div class="li-label">头像</div>
        <a target="_blank" :href="$img(list.img)" v-if="list.img">
          <div class="dataImg">
            <img :src="$img(list.img)" :onerror="$errImg" />
          </div>
        </a>
      </li>
      <li class="preview-li">
        <div class="li-label">姓名</div>
        <div class="">
          <span>{{ list.username || '-' }}</span>
        </div>
      </li>
      <li class="preview-li">
        <div class="li-label">身份证</div>
        <div class="">
          {{ list.id_card || '-' }}
        </div>
      </li>
      <li class="preview-li">
        <div class="li-label">性别</div>
        <div class="" v-if="list.sex">
          {{ list.sex == 1 ? '男' : list.sex == 2 ? '女' : '未知' }}
        </div>
      </li>

      <li class="preview-li">
        <div class="li-label">年龄</div>
        <div class="">
          {{ list.age || '-' }}
        </div>
      </li>
      <li class="preview-li">
        <div class="li-label">电话号码</div>
        <div class="">
          {{ list.tel || '-' }}
        </div>
      </li>
      <li class="preview-li">
        <div class="li-label">读者证</div>
        <div class="">
          {{ list.reader_id || '-' }}
        </div>
      </li>
      <li class="preview-li">
        <div class="li-label">学校名称</div>
        <div class="">
          {{ list.school || '-' }}
        </div>
      </li>

      <li class="preview-li">
        <div class="li-label">年级</div>
        <div class="">
          {{ list.grade || '-' }}
        </div>
      </li>

      <li class="preview-li">
        <div class="li-label">班级</div>
        <div class="">
          {{ list.class_grade || '-' }}
        </div>
      </li>

      <li class="preview-li">
        <div class="li-label">微信号</div>
        <div class="">
          {{ list.wechat_number || '-' }}
        </div>
      </li>
      <li class="preview-li">
        <div class="li-label">单位名称</div>
        <div class="">
          {{ list.unit || '-' }}
        </div>
      </li>
      <li class="preview-li">
        <div class="li-label">备注</div>
        <div class="">
          {{ list.remark || '-' }}
        </div>
      </li>
    </ul>
  </el-dialog>
</template>

<script>
export default {
  name: 'activityPreview',
  data() {
    return {
      remarkVisible: false,
      list: []
    }
  },
  methods: {
    // 父组件触发的方法
    showModal(fromData) {
      this.list = fromData.list
      this.remarkVisible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.preview {
  padding: 20px;
  font-size: 14px;
}
.preview-li {
  list-style: none;
  display: flex;
  margin-bottom: 30px;
}
.li-label {
  font-size: 12px;
  margin-right: 30px;
  font-weight: bold;
  width: 100px;
  text-align: right;
}

.previewCxt-box {
  max-width: 100%;
  height: 160px;
  overflow: auto;
}
.ql-container {
  flex: 1 0 auto;
  max-width: 80%;
}

.li-tags > span {
  margin-left: 10px;
  padding: 2px 10px;
  border-radius: 4px;
  border: 1px solid #00a9b0;
}
.dataImg{
  margin: 0 auto;
  height: 60px;
  width: 60px;
  overflow: hidden;
  display: flex;
  align-items: center;
  >img{
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
}
</style>
